<template>
	<div class="chat-input-area">
		<div 
		:class="['edit-chat-container', isEmpty ? '' : 'not-empty']"
		contenteditable="true" 
		@paste.prevent="onPaste"
				@keydown="onKeydown"
				@compositionstart="compositionFlag = true" 
				@compositionend="onCompositionEnd"
				@input="onEditorInput" 
				ref="content" 
				@blur="onBlur"
				style="white-space: nowrap;"
		></div>


	</div>
</template>

<script>

export default {
	name: "ChatInput",
	props: {
		ownerId: {
			type: Number,
		},
		groupMembers: {
			type: Array,
		},
	},
	data () {
		return {
			atSearchText: null,
			compositionFlag: false,
			imageList: [],
			fileList: [],
			currentId: 0,
			atIng: false,
			isEmpty: true,
			changeStored: true,
			blurRange: null
		}
	},
	methods: {
		// 获取 contenteditable div 的内容
		getContent () {
			return (this.$refs.content.innerHTML.trim().replace(/&nbsp;/g, ' '));
		},

		// 监听编辑器输入事件
		onEditorInput () {
			const content = this.$refs.content.innerHTML.trim();
			const cleanedContent = content.replace(/&nbsp;/g, ' ');

			this.isEmpty = !cleanedContent;
		},
		// 清空输入框内容
		clearContent () {
			this.$refs.content.innerHTML = '';  // 清空 div 内容
			this.isEmpty = true;  // 更新为空状态
		},
		// 其他事件处理方法
		onPaste () {
			// 处理粘贴事件
		},
		onKeydown (event) {

			// 处理键盘事件
			if (event.keyCode === 13) {
				this.$emit('send-message', this.getContent());
				// 				// 发送处理后的内容
				// 				// 阻止默认的换行行为
				event.preventDefault();
			}
		},
		onCompositionEnd () {
			// 处理输入法结束时的逻辑
		},
		onCompositionStart () {
			// 处理输入法开始时的逻辑
		},
		onBlur () {
			// 处理失去焦点事件
		},
	},
}
</script>

<style lang="scss">
.chat-input-area {
	width: 100%;
	height: 100%;
	position: relative;

	.edit-chat-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 1px solid #c3c3c3;
		outline: none;
		padding: 5px;
		line-height: 30px;
		font-size: 16px;
		text-align: left;
		overflow-y: scroll;

		// 单独一行时，无法在前面输入的bug
		>div:before {
			content: "\00a0";
			font-size: 14px;
			position: absolute;
			top: 0;
			left: 0;
		}

		.chat-image {
			display: block;
			max-width: 200px;
			max-height: 100px;
			border: 1px solid #e6e6e6;
			cursor: pointer;
		}

		.chat-emoji {
			width: 30px;
			height: 30px;
			vertical-align: top;
			cursor: pointer;
		}

		.chat-file-container {
			max-width: 65%;
			padding: 10px;
			border: 2px solid #587ff0;
			display: flex;
			background: #eeeC;
			border-radius: 10px;

			.file-position-left {
				display: flex;
				width: 80px;
				justify-content: center;
				align-items: center;

				.el-icon-document {
					font-size: 40px;
					text-align: center;
					color: #d42e07;
				}
			}

			.file-position-right {
				flex: 1;

				.file-name {
					font-size: 16px;
					font-weight: 600;
					color: #66b1ff;
				}

				.file-size {
					font-size: 14px;
					font-weight: 600;
					color: black;
				}
			}
		}

		.chat-at-user {
			color: #00f;
			font-weight: 600;

			border-radius: 3px;
		}
	}

	.edit-chat-container>div:nth-of-type(1):after {
		content: '请输入消息（按Ctrl+Enter键换行）';
		color: gray;
	}

	.edit-chat-container.not-empty>div:nth-of-type(1):after {
		content: none;
	}

}
</style>